{{ define "content" }}
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "Bind %s MQTT publishes" $ nil nil nil .bind.ID }}</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="table-responsive">
                    <table class="table table-hover table-striped datatable dt-responsive nowrap" id="publishes" style="width:100%">
                        <thead>
                        <tr>
                            <th>{{ i18n "Topic" . }}</th>
                            <th>{{ i18n "Calls" . }}</th>
                            <th>{{ i18n "Last call" . }}</th>
                            <th>{{ i18n "Last payload" . }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{ range $publish := .publishes }}
                        <tr>
                            <td>{{ $publish.Topic }}</td>
                            <td>{{ $publish.Calls }}</td>
                            <td><script type="application/javascript">document.write(dateToString('{{ $publish.Datetime.Format "2006-01-02T15:04:05-07:00" }}'))</script></td>
                            <td><pre><code>{{ printf "%s" $publish.Payload|raw }}</code></pre></td>
                        </tr>
                        {{ end }}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>{{ i18n "Bind %s MQTT subscribers" $ nil nil nil .bind.ID }}</h2>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div class="table-responsive">
                    <table class="table table-hover table-striped datatable dt-responsive nowrap" id="subscribers" style="width:100%">
                        <thead>
                        <tr>
                            <th>{{ i18n "Topic" . }}</th>
                            <th>{{ i18n "Calls" . }}</th>
                            <th>{{ i18n "Success time" . }}</th>
                            <th>{{ i18n "Failed time" . }}</th>
                            <th>{{ i18n "Success payload" . }}</th>
                            <th>{{ i18n "Failed payload" . }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{ range $subscriber := .subscribers }}
                        <tr>
                            <td>{{ $subscriber.Subscriber.Topic.String }}</td>
                            <td>
                                <div class="btn-group" role="group" style="min-width: 96px">
                                    <button class="btn btn-xs btn-success">{{ $subscriber.SuccessCount }}</button>
                                    <button class="btn btn-xs btn-danger">{{ $subscriber.FailedCount }}</button>
                                </div>
                            <td>
                                {{ if $subscriber.SuccessMessage }}
                                <script type="application/javascript">document.write(dateToString('{{ $subscriber.SuccessMessage.Datetime.Format "2006-01-02T15:04:05-07:00" }}'))</script>
                                {{ end }}
                            </td>
                            <td>
                                {{ if $subscriber.FailedMessage }}
                                    <script type="application/javascript">document.write(dateToString('{{ $subscriber.FailedMessage.Datetime.Format "2006-01-02T15:04:05-07:00" }}'))</script>
                                {{ end }}
                            </td>
                            <td>
                                {{ if $subscriber.SuccessMessage }}
                                    <pre><code>{{ printf "%s" $subscriber.SuccessMessage.Payload|raw }}</code></pre>
                                {{ end }}
                            </td>
                            <td>
                                {{ if $subscriber.FailedMessage }}
                                    <pre><code>{{ printf "%s" $subscriber.FailedMessage.Payload|raw }}</code></pre>
                                {{ end }}
                            </td>
                        </tr>
                        {{ end }}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}

{{ define "head" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" false) }}
{{ end }}

{{ define "js" }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net/js/jquery.dataTables.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive/js/dataTables.responsive.min.js" false) }}
    {{ staticHTML (staticURL "/dashboard/assets/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.min.js" false) }}

    <script type="application/javascript">
        $(document).ready(function () {
            var
                    tableP = $('#publishes'),
                    tableS = $('#subscribers');

            tableP.one('init.dt', function (e, settings) {
                tableP.DataTable().rows().every(function (i) {
                    var data = this.data();
                    data[2] = data[2].length > 0 ? dateToString(data[2]) : '';
                    this.row(i).data(data);
                });

                var api = new $.fn.dataTable.Api(settings);
                api.order([2, 'desc']).draw();
            });

            tableS.one('init.dt', function (e, settings) {
                tableS.DataTable().rows().every(function (i) {
                    var data = this.data();
                    data[2] = data[2].length > 0 ? dateToString(data[2]) : '';
                    data[4] = data[4].length > 0 ? dateToString(data[4]) : '';
                    this.row(i).data(data);
                });

                var api = new $.fn.dataTable.Api(settings);
                api.order([2, 'desc']).draw();
            });
        });
    </script>
{{ end }}
